<template>
  <div id="addressNew">
    <header-bar :head-title="headTitle" goBack="true" menu="true"></header-bar>
    <div class="address-edit">
      <form>
        <mt-field label="收货人" placeholder="请输入用户名" v-model="username"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone" :attr="{maxlength:11}"></mt-field>
      <mt-field label="省市区" placeholder="请选择省市区" v-model="address"></mt-field>
      <div class="linkage-wrap">
        <div class="address-wrap">
          <span class="btn" @click="address_flag = true">点击选择</span>
        </div>
        <div class="pick-mark" v-show="address_flag" @click="address_flag = false">
          <div class="btn-wrap">
            <a class="btn-cancel" @click="address_flag = false">取消</a>
            <a class="btn-sure" @click="fillAddress">确定</a>
          </div>
          <mt-picker class="select" :slots="slots" value-key="aname" @change="onValuesChange"></mt-picker>
        </div>
      </div>
      <mt-field label="详细地址" placeholder="请输入地址" v-model="detailAddress"></mt-field>
      <mt-cell title="是否设为默认地址"><mt-switch v-model="isDefault"></mt-switch></mt-cell>
        <!-- <div class="item">
          <span>
            <b>*</b>地区</span>
          <input class="input" :value="address" disabled type="text" style="background:#fff;" placeholder="请选择所在地区">
          <span class="icon iconfont icon-account"></span>
          <div class="linkage-wrap">
            <div class="address-wrap">
              <span class="btn" @click="address_flag = true">点击选择</span>
            </div>
            <div class="pick-mark" v-show="address_flag" @click="address_flag = false">
              <div class="btn-wrap">
                <a class="btn-cancel" @click="address_flag = false">取消</a>
                <a class="btn-sure" @click="fillAddress">确定</a>
              </div>
              <mt-picker class="select" :slots="slots" value-key="aname" @change="onValuesChange"></mt-picker>
            </div>
          </div>
        </div>
        <div class="item">
          <span>
            <b>*</b>详细地址</span>
          <input type="text" placeholder="浙江省" />
        </div>
        <div class="item">
          <span>
            <b>*</b>手机号</span>
          <input type="text" placeholder="15067***" />
        </div>
        <div class="item">
          <span>
            <b>*</b>收货人</span>
          <input type="text" placeholder="你先说" />
        </div>
        <div class="set-auto">
          <span class="left">设置默认地址(注：每次下单时会使用该地址)</span>
          <input type="checkbox" class="right" />
        </div> -->
      </form>
    </div>
    <div class="save">
      保存地址
    </div>

  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import {address, slots} from '@/api/city.js'
import { Picker } from 'mint-ui'
export default {
  name: 'index',
  components: {
    HeaderBar,
    Picker
  },
  data () {
    return {
      address_flag: false,
      temp_addr: '',
      headTitle: '编辑地址',
      address: '',
      slots: slots
    }
  },
  methods: {
    fillAddress () {
      // 填入省市区
      this.address = this.temp_addr;
      this.address_flag = false;
      this.$emit('getAddress', this.address);
    },
    initAddress () {
      this.slots[0].values = address.filter((item, index) => {
        if (item.apid === 0) {
          return item;
        }
      });
    },
    onValuesChange (picker, values) {
      // 防止没有省份时报错
      if (values[0]) {
        this.slots[1].values = address.filter((item, index) => {
          if (item.apid === values[0].aid) {
            return item;
          }
        });
      }
      // 防止没有实时报错
      if (values[1]) {
        this.slots[2].values = address.filter((item, index) => {
          if (item.apid === values[1].aid) {
            return item;
          }
        });
      }
      // 防止没有区时报错
      if (values[2]) {
        // 这里可以指定地址符，此处以空格进行连接
        this.temp_addr = values[0].aname + ' ' + values[1].aname + ' ' + values[2].aname;
      }
    }

  },
  mounted () {
    this.initAddress();
  }
}
</script>
<style lang="scss" scoped>
.save{
    height: 1.6rem;
    line-height: 1.6rem;
    margin: .4rem;
    background: #c74a4a;
    color: #fff;
    text-align: center;
    font-size: .7rem;
    border-radius: .1rem;
}
</style>
